<!-- 权益详情 -->
<template>
	<view class="detail">
		<view class="bg">
			<image src='https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/vip/bg3.png'></image>
			<view class="content">
				<view class="head">
					<u-icon @click="back" name="arrow-left" size="40rpx" color="#fff"></u-icon>
					<view class="title">
						权益详情
					</view>
					<view class="txt"></view>
				</view>
				<view class="info">
					<view class="text1">会员权益详情</view>
					<view class="text2">—— 已知尊享会员专享 ——</view>
				</view>
			</view>
		</view>

		<view class="contain">
			<block v-if="items.length">
				<view class="item" v-for="(item,index) in items" :key="index">
					<view class="title">
						<!-- <view class="dian"></view> -->
						<view class="text">{{item.title}}</view>
					</view>
					<rich-text class="info" :nodes="item.content"></rich-text>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import {
		vipEquity,
		vipEquityID
	} from '@/apis/apis.js'
	import Header from '@/components/c_header.vue';
	export default {
		components: {
			Header
		},
		data() {
			return {
				items: []
			}
		},
		onLoad(option) {
			console.log(option.id)
			this.init(option.id)
		},
		methods: {
			init(id) {
				console.log(id)
				vipEquityID(id).then(res => {
					console.log(res)
					res.data.content = res.data.content.replace(/<img /, '<img style="max-width:100%;"')
					// res.data.forEach(el => {
					// 	el.content = el.content.replace(/<img /, '<img style="max-width:100%;"')
					// })
					this.items = [res.data]
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail {
		width: 100%;
		height: 100%;

		.bg {
			position: relative;
			width: 100%;
			height: 410rpx;

			&>image {
				width: 100%;
				height: 100%;
				position: absolute;
				pointer-events: none;
				left: 0;
				top: -2rpx;
			}

			.content {
				padding: 76rpx 28rpx 100rpx 30rpx;
				position: relative;
				z-index: 999;

				.head {
					display: flex;
					justify-content: space-between;
					font-size: 32rpx;
					font-weight: bold;
					color: #FFFFFF;

					.txt {
						font-size: 28rpx;
						font-weight: normal;
					}
				}

				.info {
					width: 400rpx;
					// text-align: center;
					margin: 102rpx auto 88rpx;

					.text1 {
						font-size: 46rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #D19A57;
					}

					.text2 {
						font-size: 28rpx;
						margin-top: 20rpx;
						color: #A56A23;
					}
				}
			}
		}

		.contain {
			padding: 26rpx 30rpx 130rpx;

			.item {
				margin-bottom: 36rpx;

				.title {
					display: flex;
					align-items: center;

					.dian {
						width: 10rpx;
						height: 10rpx;
						border-radius: 50%;
						background-color: #3D250F;
						margin-right: 10rpx;
					}

					.text {
						width: 100%;
						font-size: 32rpx;
						font-weight: 500;
						color: #3D250F;
						word-break: break-all;
					}
				}

				.info {
					margin: 34rpx;
					background-color: #FFFCF5;
					color: #766E66;
				}
			}
		}
	}
</style>
